<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
    <script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>
    <script type="text/javascript" src="/webjars/jquery-cookie/1.4.1-1/jquery.cookie.js"></script>
</head>
<style>
    body{
        text-align: center;
    }
</style>
<body>
<div id="app">
    <h1>常见问题检索</h1>

    <br><br>

    请输入查询关键字:&nbsp;&nbsp;
    <input type="text" v-model="title">&nbsp;&nbsp;
    <button type="button" @click="selectEntry(1)" >查询</button>&nbsp;&nbsp;
    <a href="add.html">添加常见问题</a><br><br>
    <h2>检索结果</h2>

    <table class="table">
        <thead>
        <tr>
            <th>编号</th>
            <th>标题</th>
            <th>分类</th>
            <th>创建时间</th></tr>
        </thead>
        <tbody>
        <tr class="active" v-for="it in entries.faqs">
            <td>{{it.id}}</td>
            <td> <a href="#" @click="xiangqing(it.id)">{{it.title}}</a></td>
            <td>{{it.classes.cname}}</td>
            <td>{{it.createDate}}</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
             aaaa: {},
            entries: {},
            title:""
        },
        methods: {
            selectEntry: function () {
                axios.get("/select", {
                    params: {title: this.title,}
                }).then(res => this.entries = res.data);
            },
            xiangqing:function (id) {
                sessionStorage.setItem("id",id);
                window.location.href = "http://localhost:8080/xiang.html";
            }
        },
        mounted() {
            this.selectEntry(1);
        }
    });
</script>